<div class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container">
		<div class="navbar-header navbar-desk">
			<a class="navbar-brand toggle-sidebar visible-xs visible-sm">
				<i class="octicon octicon-three-bars"></i>
			</a>
			<a class="navbar-brand navbar-home hidden-xs hidden-sm" href="#">Home</a>
			<ul class="nav navbar-nav" id="navbar-breadcrumbs">
			</ul>
		</div>
		<div class="navbar-center ellipsis" style="display: none;"></div>

		<ul class="nav navbar-nav navbar-right">
			<li class="visible-xs">
				<a class="navbar-search-button" href="#" data-toggle="modal" data-target="#search-modal"><i class="octicon octicon-search"></i></a>
			</li>
			<li class="dropdown dropdown-navbar-user dropdown-mobile">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#"
					onclick="return false;">
				{{ avatar }}
                <span class="ellipsis toolbar-user-fullname hidden-xs hidden-sm">
					{%= frappe.user.full_name() %}</span>
                <b class="caret hidden-xs hidden-sm"></b></a>
				<ul class="dropdown-menu" id="toolbar-user" role="menu">
					<li class="navbar-set-desktop-icons"><a>
					    {%= __("Set Desktop Icons") %}</a></li>
					<li><a href="#Form/User/{%= encodeURIComponent(frappe.session.user) %}">
					    {%= __("My Settings") %}</a></li>
					<li class="navbar-reload">
						<a href="#" onclick="return frappe.ui.toolbar.clear_cache();">
					    {%= __("Reload") %}</a></li>
					<li><a href="/index" target="_blank" rel="noopener noreferrer">
						{%= __("View Website") %}</a></li>
					<li><a href="#background_jobs">
						{%= __("Background Jobs") %}</a></li>
					<li class="divider"></li>
					<li><a href="#" onclick="return frappe.app.logout();">
						{%= __("Logout") %}</a></li>
				</ul>
			</li>

			<li class="dropdown dropdown-help dropdown-mobile">
				<a class="dropdown-toggle" data-toggle="dropdown" href="#"
					onclick="return false;"  style="height: 40px;">
					<span class="hidden-xs hidden-sm" style="line-height: 24px;">{{ __("Help") }} <b class="caret"></b></span>
					<span class="visible-xs visible-sm standard-image"
						style="padding: 50% 7px; font-size: 17px; background-color: #fafbfc; font-weight: 100;">?</span>
				</a>
				<ul class="dropdown-menu" role="menu">
					<li id="help-links"></li>
					<li class="divider"></li>
					<li class="divider documentation-links"></li>
					<li><a href="#" onclick="return frappe.ui.toolbar.show_about();">
						{%= __("About") %}</a></li>
				</ul>
			</li>

			<!-- frappe.chat -->
			<!-- "placeholder, to display or not to display." -->
			<li class="frappe-chat-dropdown"></li>
			<!-- end frappe.chat -->

			<li class="dropdown dropdown-navbar-new-comments dropdown-mobile">
				<a class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
					<span class="navbar-new-comments">0</span>
				</a>
				<ul class="dropdown-menu" id="dropdown-notification" role="menu" style="max-height: 480px; overflow-y: auto;">
				</ul>
			</li>
		</ul>

		<div id="search-modal" class="modal fade" role="dialog">
			<div class="modal-dialog" style="height: 50px;">
				<div class="modal-content">
					<div class="modal-header">
						<form role="search" onsubmit="return false;">
							<div class="input-group" style="width: 100%">
								<input id="modal-search" type="text" class="form-control"
								placeholder="{%= __("Search or type a command") %}" aria-haspopup="true">
								<button type="reset" class="close"><i class="octicon octicon-x"></i></button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>

		<div class="hidden-xs">
	        <form class="navbar-form navbar-right" role="search" onsubmit="return false;">
	          <div class="form-group form-group-sm ui-front">
	            <input id="navbar-search" type="text" class="form-control"
					placeholder="{%= __("Search or type a command") %} {%= __("(Ctrl + G)") %}" aria-haspopup="true">
				<span class="octicon octicon-search navbar-search-icon"></span>
	          </div>
	        </form>
		</div>
	</div>
</div>
